<template>
	<view>
		<tui-list-cell :hover="false" @click="switchShops(order.shopsSn)">
			<view class="tui-goods-title">
				<div class="flex justify-center align-center">
					<image src="/static/icon/scenic.png" class="icon-20"></image>
					<div class="mg-l-5">{{order.shopsName||''}}</div>
				</div>
				<view class="tui-order-status">{{order.orderStatusText}}</view>
			</view>
		</tui-list-cell>

		<tui-list-cell :size="22" color="#888" :last="true" :hover="false" :lineLeft="false"
			v-if="order.totalSecond>0&&order.orderStatus === 0" @click="orderDetail(order.id)">
			<view class="tui-goods-title">
				等待买家付款
				<tui-countdown :time="order.totalSecond||0" :hours="false" :isColon="false" backgroundColor="#333"
					borderColor="#333" color="#fff" />
			</view>
		</tui-list-cell>
		<!-- 		<tui-list-cell :hover="false" :lineLeft="false" @click="orderDetail(order.id)">
					<view class="tui-goods-title">
						<view>订单号：{{order.orderSn}}</view>
						<view class="tui-order-status">{{order.orderStatusText}}</view>
					</view>
				</tui-list-cell> -->
		<block>
			<tui-list-cell padding="0" @click="orderDetail(order.id)">
				<view class="tui-goods-item">
					<image :src="order.orderGoodsEntityList[0].listPicUrl" class="tui-goods-img"></image>
					<view class="tui-goods-center">
						<view class="tui-goods-name">{{order.orderGoodsEntityList[0].goodsName||''}}</view>
					</view>
					<view class="tui-price-right default-color">
						<view>张数:{{order.orderGoodsEntityList.length}}</view>
						<view>总价:￥{{order.actualPrice}}</view>
					</view>
				</view>
			</tui-list-cell>
		</block>
		<view class="tui-order-btn">
			<view class="tui-btn-ml" v-if="order.orderStatus==0">
				<tui-button @click="payOrder(order.id,order.actualPrice)" plain width="152rpx" height="56rpx" :size="26"
					type="danger" shape="circle">立即支付</tui-button>
			</view>
			<view class="tui-btn-ml" v-if="(order.orderStatus==0||order.orderStatus==201) && order.orderType == 1">
				<tui-button @click="cancelOrder(order.orderStatus, order.id)" type="black" plain width="152rpx"
					height="56rpx" :size="26" shape="circle">取消订单</tui-button>
			</view>
			<view class="tui-btn-ml" v-if="order.handleOption.confirm">
				<tui-button @click="confirmOrder(order.id)" type="primary" plain width="152rpx" height="56rpx"
					:size="26" shape="circle">确认使用</tui-button>
			</view>
			<view class="tui-btn-ml" v-if="order.handleOption.comment===true && order.commentCount == 0">
				<tui-button @click="postComment(order.id)" type="green" plain width="152rpx" height="56rpx" :size="26"
					shape="circle">评价晒单</tui-button>
			</view>
			<view class="tui-btn-ml" v-if="order.commentCount > 0">
				<tui-button @click="lookComment(order.id)" type="green" plain width="152rpx" height="56rpx" :size="26"
					shape="circle">查看评价</tui-button>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	export default {
		components: {},
		props: {
			value: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		data() {
			return {
				order: {}
			};
		},
		watch: {
			value(val) {
				this.order = val
				if ((this.order.payStatus == 1 || this.order.payStatus == 2) && this.order.orderStatus === 0) {
					this.order.totalSecond = util.expireTime(this.order.expireTime)
				}
			}
		},
		created() {
			this.order = this.value
			if ((this.order.payStatus == 1 || this.order.payStatus == 2) && this.order.orderStatus === 0) {
				this.order.totalSecond = util.expireTime(this.order.expireTime)
			}
		},
		methods: {
			switchShops(shopsSn) {
				uni.navigateTo({
					url: `/pagesA/food/shops?shopsSn=${shopsSn}`
				})
			},
			orderDetail(id) {
				uni.navigateTo({
					url: '/pagesA/food/orderDetail?id=' + id
				})
			},
			cancelOrder(orderStatus, id) {
				let that = this;

				var errorMessage = '';
				switch (orderStatus) {
					case 300: {
						errorMessage = '订单已发货';
						break;
					}
					case 301: {
						errorMessage = '订单已使用';
						break;
					}
					case 100: {
						errorMessage = '订单已过期';
						break;
					}
					case 101: {
						errorMessage = '订单已取消';
						break;
					}
					case 102: {
						errorMessage = '订单已删除';
						break;
					}
					case 401: {
						errorMessage = '订单已退款';
						break;
					}
					case 402: {
						errorMessage = '订单已退货';
						break;
					}
				}
				if (errorMessage != '') {
					util.toast(errorMessage);
					return false;
				}
				uni.showModal({
					title: '',
					content: '确定要取消此订单？',
					success: function(res) {
						if (res.confirm) {
							util.request('order/cancelOrder', {
								orderId: id
							}, 'POST').then(function(res) {
								if (res.code === 0) {
									uni.showModal({
										title: '提示',
										content: res.msg,
										showCancel: false,
										confirmText: '继续',
										success: function(res) {
											uni.redirectTo({
												url: '/pages/ucenter/order/order?currentTab=' +
													that.currentTab
											});
										}
									});
								}
							});
						}
					}
				});
			},
			payOrder(orderId, actualPrice) {
				uni.navigateTo({
					url: '/pages/pay/pay?orderId=' + orderId + '&actualPrice=' + actualPrice
				})
			},
			confirmOrder(orderId) {
				let that = this;
				util.request('order/confirmOrder', {
					orderId: orderId
				}, 'POST').then(function(res) {
					if (res.code === 0) {
						util.toast('订单完成')
						setTimeout(function() {
							uni.redirectTo({
								url: '/pages/ucenter/order/order?currentTab=' + that.currentTab
							});
						}, 2000);
					}
				});
			},
			postComment(orderId) {
				let that = this;
				uni.navigateTo({
					url: '/pages/commentPost/commentPost?type=0&orderId=' + orderId
				})
			},
			lookComment(orderId) {
				uni.navigateTo({
					url: '/pages/comment/comment?type=0&from=1&orderId=' + orderId
				})
			},
		}
	}
</script>

<style>
	.tui-goods-title {
		width: 100%;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-order-status {
		color: #888;
		font-size: 26rpx;
	}

	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
	}

	.tui-goods-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color: #888888;
		/* line-height: 30rpx; */
		padding-top: 20rpx;
		margin-left: 20rpx;
	}

	.tui-goods-price {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		font-size: 24rpx;
	}

	.tui-size-24 {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-price-large {
		font-size: 32rpx;
		line-height: 30rpx;
		font-weight: 600;
	}

	.tui-order-btn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background: #fff;
		padding: 10rpx 30rpx 20rpx;
		box-sizing: border-box;
	}

	.tui-btn-ml {
		margin-left: 20rpx;
	}
</style>
